<template>
  <div>
    <el-container style="height:100vh ">

      <el-aside width="auto">
        <IsAside/>
      </el-aside>

      <el-container>
        <!--   header     -->
        <el-header style="background-color: black">
          <IsHeader/>
        </el-header>

        <!--   Main    -->
        <el-main style="height: 100%;padding: 0">
          <keep-alive :include="['IsUsers', 'IsGoods']">
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import IsAside from "@/components/IsAside";
import IsHeader from "@/components/IsHeader";
import getRequest from "@/Network/axios";
import navsData from "@/navsData";

export default {
  name: "IsContainer",

  components: {
    IsAside,
    IsHeader,
  },

  computed: {},


  mounted() {

    // 获取当前用户信息
    getRequest({
      method: 'post',
      url: '/getUser',
      data: {
        username: localStorage.getItem('username')
      },
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
      }
    }).then(res => {
      if (res.data.status >= 400) {
        return
      }
      this.$store.state.usertype = res.data.user.usertype

      /**
       *  编译 0 1 代表的用户类型
       */
      if (res.data.user.usertype === '0') {
        res.data.user.usertype = '普通用户'
        let newNavsData = []
        for (let i = 0; i < navsData.length; i++) {
          if (navsData[i].meta.isAuto === 0) {
            newNavsData.push(navsData[i])
          }
        }
        console.log('0')
        this.$store.state.navs = newNavsData
      }

      this.$store.state.user = res.data.user

      if (res.data.user.usertype === '1') {
        res.data.user.usertype = '商家'
        let newNavsData = []
        for (let i = 0; i < navsData.length; i++) {
          if (navsData[i].meta.isAuto === 1 || navsData[i].meta.isAuto === 0) {
            newNavsData.push(navsData[i])
          }
        }
        return this.$store.state.navs = newNavsData
      }


      if (res.data.user.usertype === '2') {
        res.data.user.usertype = '管理员'
        return this.$store.state.navs = navsData
      }


    }).catch(err => {
      console.log(err)
    })

    // 获取所用用户信息
    getRequest({
      method: 'get',
      url: '/getUsers',
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
      }
    }).then(res => {

      for (let i = 0; i < res.data.users.length; i++) {

        if (res.data.users[i].usertype === '0') {
          res.data.users[i].usertype = '普通用户'
        }

        if (res.data.users[i].usertype === '1') {
          res.data.users[i].usertype = '商家'
        }
      }
      this.$store.state.users = res.data.users

    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>

.el-header {
  padding: 0;
  background-color: #B3C0D1;
  color: white;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: black;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>